<template>
  <view class="shop_box">
    <view class="shop_list_item">
      <view v-if="items.picture"  class="shop_logo_box">
        <image :src="items.picture" :lazy-load="true"
               @load="imageLoad(items?.actionUrl?.impMonitorUrl ? items?.actionUrl?.impMonitorUrl : items?.action_url?.imp_monitor_url)" mode="widthFix" style="width: 140rpx;height: 140rpx;object-fit: cover;"></image>
        <!--<image style="position: absolute;top: 0;left: 0;width: 56rpx;height: 32rpx;border-radius: 0"
                 :src="BaseImgUrl+'/shop/guan_shop.png'"></image>-->
      </view>
      <image v-else
             src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
             style="border-radius: 20rpx;"></image>
      <view class="shop_info">
        <view class="shop_mingzi">
          <view :class="items.count == 0?'width':''" class="shop_name ellipsis-one-line">{{ items.name }}</view>
        </view>
        <view class="yysjandejuli_box">
          <view class="yysj_text">
            <view class="yysj_text_platform"><image :src="BaseImgUrl + '/home/meituan_icon.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>美团</view>
            <view class="yysj_text_time">配送时长：{{ items.deliveryTimeTip }}</view>
          </view>
          <view class="shop_juli">距您：{{ items.deliveryDistance || '0km' }}</view>
        </view>
        <view v-if="items.planActivityInfoList?.length > 1" class="activityNum">
          <view class="activityNum_text">共{{items.planActivityInfoList?.length}}个活动</view>
        </view>
        <view v-else class="single_activity">
          <view class="single_activity_item cashback_box">
            <view class="activityNum_back">{{newUser == '新用户'?'新人全额返':'返'}}</view>
            <view v-if="newUser == '新用户'" class="cashback_text">
              最高返￥{{ userInfo?.is_member === 0 ? twoFixed(items.planActivityInfoList[0].commission.maxCommission) : twoFixed(items.planActivityInfoList[0].member_commission.maxCommission)}}
            </view>
            <view v-if="newUser == '老用户'" class="cashback_text">
              实付金额{{ userInfo?.is_member === 0 ? twoFixed(items.planActivityInfoList[0].commission.ratio) : twoFixed(items.planActivityInfoList[0].member_commission.ratio)}}%
            </view>
          </view>
          <view v-if="newUser == '老用户'" class="activityNum_max" style="border-radius: 8rpx;margin-left: 10rpx;">
            最高返￥{{ userInfo?.is_member === 0 ? twoFixed(items.planActivityInfoList[0].commission.maxCommission) : twoFixed(items.planActivityInfoList[0].member_commission.maxCommission) }}
          </view>
          <view v-if="items.planActivityInfoList[0].planActivityType == 2" class="activityNum_evaluate">无需评价</view>
        </view>
      </view>
    </view>
    <view v-for="(aitem, aindex) in items?.planActivityInfoList" :key="aindex" class="active_box"
          @click="handleShopDetailActive(items,aitem,aindex)">
      <view v-if="items?.planActivityInfoList?.length > 1" class="a_title activityNum">
        <text class="activity_num">活动{{ aindex + 1 }}</text>
        <view class="single_activity_item cashback_box">
          <view class="activityNum_back">{{newUser=='新用户'?'新人全额返':'返'}}</view>
          <view v-if="newUser == '新用户'" class="cashback_text">
            最高返￥{{ userInfo?.is_member === 0 ? twoFixed(aitem.commission.maxCommission) : twoFixed(aitem.member_commission.maxCommission)}}
          </view>
          <view v-if="newUser == '老用户'" class="cashback_text">
            实付金额{{ userInfo?.is_member === 0 ? twoFixed(aitem.commission.ratio) : twoFixed(aitem.member_commission.ratio)}}%
          </view>
        </view>
        <view v-if="newUser == '老用户'" class="activityNum_max" style="border-radius: 8rpx;margin-left: 10rpx;">
          最高返￥{{ userInfo?.is_member === 0 ? twoFixed(aitem.commission.maxCommission) : twoFixed(aitem.member_commission.maxCommission) }}
        </view>
        <view v-if="aitem.planActivityType == 2" class="activityNum_item activityNum_evaluate">无需评价</view>
      </view>
      <!--底部按钮和剩余份数-->
      <view class="active_btns">
        <view class="left_box">
          <view class="progress_box">
            <up-line-progress :percentage="aitem?.percent" :showText="false" activeColor="#FF5429" inactiveColor="#FDE0BF" height="8">
              <view>
                <image :src="BaseImgUrl + '/home/progress_icon01.png'" mode="widthFix" style="width: 24rpx;height: 24rpx;"></image>
              </view>
            </up-line-progress>
          </view>
          <text style="font-size:24rpx;color: #666666;">还剩<text class="val_num">{{ aitem.inventory }}</text>份</text>
          <!--<progress :percent="aitem?.percent"
                    border-radius="100"
                    duration="16"
                    stroke-width="8"
                    activeColor="#FF4E2C"
                    backgroundColor="#FDEBD8"
                    active="true"/>-->
        </view>
        <view class="right_box">
          <view v-if="aitem.inventory == 0" class="btn sq_btn">已售罄</view>
          <view v-else class="btn qd_btn">立即报名</view>
        </view>
      </view>
      <view v-if="aindex < items.planActivityInfoList?.length - 1" class="activity_line">
        <view class="activity_line_left"></view>
        <u-line color="#D8D8D8" hairline dashed margin="10rpx 0"></u-line>
        <view class="activity_line_right"></view>
      </view>
    </view>

  </view>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {conUtils} from "../../utils/conUtils";
import {BaseImgUrl, BaseURL, lsHttp} from "../../utils/lshttp";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import XtxProgress from "../../components/XtxProgress.vue";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
const userInfoStore = useUserInfoStore()
const userInfo = userInfoStore.userInfo
const props = defineProps({
  items: {
    type: Object
  },
  newUser: {
    type: String,
    default: ''
  }
})
const newUserVal = ref()
onMounted(() => {
})
/* watch(props.newUser, (newVal, oldVal) => {
  conUtils("新用户=====", newVal)
  newUserVal.value = newVal
}) */
const emits = defineEmits(['changeShop'])
const imageLoad = (imUrl) => {
 if(BaseURL !== "https://test.lszbg.cn"){
   conUtils("曝光", imUrl)
   // lsHttp({
   //   url: 'https:' + imUrl,
   //   method: 'GET',
   // }, false)
 }
}

// 点击活动跳转到店铺详情对应显示活动
const handleShopDetailActive = (item, aitem, Index) => {
  console.log('官返店铺详情=', item)
  if (userInfoStore.isLogin()) {
    const clickUrl = 'https:' + item?.actionUrl?.clickMonitorUrl ? item?.actionUrl?.clickMonitorUrl : item.action_url?.click_monitor_url
    if(BaseURL !== "https://test.lszbg.cn"){
      // lsHttp({
      //   url: clickUrl,
      //   method: 'GET',
      // }, false)
      conUtils("clickUrl", clickUrl)
    }
    if (aitem.inventory === 0) {
      uni.showToast({
        title: '已售罄',
        icon: 'none'
      })
      return
    }
    if (aitem.is_work === 0) {
      uni.showToast({
        title: aitem.order_open_time,
        icon: 'none'
      })
      return
    }
    uni.navigateTo({
      url: '/pages_shopdetail/shopdetail_gf?&activeIndex=' + Index + "&planType=" + aitem.planActivityType,
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function (data) {
          console.log(data)
        },
        someEvent: function (data) {
          console.log(data)
          emits('changeShop', data)
        }
      },
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('item', item)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.no_pay_rul {
  background-color: #FFF1D6;
  color: #F9661C;
  border-radius: 0 5rpx 5rpx 0;
}
/* 店铺列表css start */
.home_shop_box{
  box-sizing: border-box;
  padding: 0 20rpx;
  position: relative
}
.shops_list {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 0 0 20rpx;
  .shop_box{
    width: 100%;
  }
}
/* 店铺列表店铺信息css */
.shop_list_item {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 20rpx;
  display: flex;
  position: relative;

  .shop_logo_box {
    position: relative;
    width: 128rpx;
    height: 128rpx;
    overflow: hidden;
    border-radius: 16rpx;

    .shop_quality {
      width: 72rpx;
      height: 36rpx;
      line-height: 36rpx;
      font-size: 24rpx;
      color: #FFDC7A;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      border-radius: 16rpx 0 10rpx 0;
      background: linear-gradient(270deg, #161410 0%, #59392C 100%);
    }

    .shop_new {
      width: 72rpx;
      height: 36rpx;
      line-height: 36rpx;
      font-size: 24rpx;
      color: #FFFFFF;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      border-radius: 16rpx 0 10rpx 0;
      background: linear-gradient(270deg, #05AC2C 0%, #1EAC44 96%);
    }

    .shop_logo_img {
      border-radius: 16rpx;
    }
  }

  .shop_info {
    flex: 1;
    padding-left: 20rpx;

    .shop_mingzi {
      .shop_name {
        font-weight: 400;
        flex: 1;
        font-size: 28rpx;
        color: #0A0A0A;
        height: 40rpx;
        line-height: 40rpx;
      }

      .shop_type {
        background-color: #FECC32;
        color: #333333;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 0 6rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .shop_type3 {
        background-color: #db2727;
        color: #FFFFFF;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 0 6rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .elemtag {
        background-color: #17aeff;
        color: #ffffff;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 0 6rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .shop_juli {
        color: #666666;
        font-size: 24rpx;
        text-align: right;
      }
    }

    /* 平台、距离 */

    .yysjandejuli_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      padding-bottom: 8rpx;

      .yysj_text {
        border-radius: 8rpx;
        padding: 8rpx 13rpx 8rpx 0;
        font-size: 24rpx;
        text-align: center;
        color: #888888;
        display: flex;
        align-items: center;

        .yysj_text_platform {
          display: flex;
          align-items: center;
        }

        .yysj_text_time {
          padding-left: 10rpx;
        }
      }

      .shop_juli {
        color: #888888;
        font-size: 24rpx;
        text-align: right;
      }

    }

    /* 活动数量css */

    .activityNum {
      width: 120rpx;
      height: 40rpx;

      .activityNum_text {
        font-size: 22rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        color: #FF700C;
        border: 2rpx solid #FD7C22;
        border-radius: 8rpx;
      }
    }

    /* 单个活动css */

    .single_activity {
      display: flex;
      align-items: center;

      .single_activity_item {
      }
    }

    .shop_yuliang {
      display: flex;
      align-items: center;
      margin-top: -10rpx;

      .jindutiao {
        flex: 1;
        margin-top: -18rpx;
      }

      .shengyu {
        padding-left: 20rpx;
        color: #FF6433;
        font-size: 24rpx;
      }
    }
  }
}
// 活动满返公共css
.cashback_box {
  height: 36rpx;
  line-height: 36rpx;
  padding: 2rpx 2rpx 2rpx 10rpx;
  background: #FD7C22;
  border-radius: 8rpx;
  display: flex;
  align-items: center;

  .activityNum_back {
    color: #FFFFFF;
    padding-right: 10rpx;
    font-size: 24rpx;
  }

  .cashback_text {
    font-size: 22rpx;
    color: #FD7C22;
    padding: 0 10rpx;
    background: #FFFFFF;
    border-radius: 0 8rpx 8rpx 0;
  }
}
/* 品质专享 */
.activityNum_quality{
  width: 120rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #FFD11A;
  text-align: center;
  background: linear-gradient( 270deg, #9D561B 0%, #161410 100%);
  border-radius: 8rpx;
  margin-left: 12rpx;
}
/* 无需评价 */
.activityNum_evaluate{
  width: 116rpx;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 24rpx;
  color: #2DB327;
  text-align: center;
  background: #F5FFF5;
  border-radius: 8rpx;
  border: 2rpx solid #74D87F;
  margin-left: 12rpx;
}
/* 官返最高返 */
.activityNum_max{
  height: 36rpx;
  line-height: 36rpx;
  font-size: 24rpx;
  color: #FD7C22;
  padding: 0 10rpx;
  background: #FFFFFF;
  border: 2rpx solid #FD7C22;
  border-radius: 8rpx;
}
/* 店铺活动css */
.active_box {
  border-radius: 10rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 20rpx;

  .a_title {
    font-size: 22rpx;
    color: #666;
    padding: 0 20rpx;
    border-radius: 3px;
    position: relative;
    display: flex;
    align-items: center;
    .activity_num {
      width: 100rpx;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      text-align: center;
      color: #3D3D3D;
      box-sizing: border-box;
      margin-right: 10rpx;
      background: #F4F4F4;
      border-radius: 8rpx;
    }
    .activityNum_item{
      font-size: 24rpx;
      line-height: 34rpx;
    }
    .activityNum_new{
      color: #FFFFFF;
      text-align: center;
      padding: 6rpx 10rpx;
      background: #FD7C22;
      border-radius: 8rpx 0 0 8rpx;
      margin-left: 10rpx;
    }
    .activityNum_cashback{
      color: #FD7C22;
      text-align: center;
      padding: 4rpx 10rpx;
      background: #FFFFFF;
      border: 2rpx solid #FD7C22;
      border-radius: 0 8rpx 8rpx 0;
      box-sizing: border-box;
    }
    /* 品质专享 */
    .Quality_exclusive{
      background: linear-gradient( 270deg, #59392C 0%, #161410 99%);
      color: #FFDC7A;
      border-radius: 6rpx;
      padding: 8rpx 12rpx;
      border: 2rpx solid #F9DD91;
      font-size: 22rpx;
      margin-left: 10rpx;
      position: relative;
      z-index: 11;
    }
    .pj_text {
      border: 1px solid #45E2BE;
      background: #EBFEF9;
      border-radius: 6px;
      color: #07AA83;
      box-sizing: border-box;
      padding: 8rpx 10rpx;
      font-size: 22rpx;
      margin-left: 10rpx;
      display: inline-block;
      position: relative;
      z-index: 11;
      &.hui {
        background: #EFEFEF;
        border: 1px solid #DEDEDE;
        color: #666;
      }
    }
    /* &:after {
      content: '';
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 2rpx;
      background-color: #EEE;
    } */
  }

  .active_btns {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    padding: 0 20rpx;
    .left_box {
      display: flex;
      align-items: center;

      .money {
        background: #FFF7EF;
        border: 1px solid #FFBC7E;
        border-radius: 3px;
        padding: 0 10rpx;
        font-size: 24rpx;
        color: #FF7900;
        height: 40rpx;
        line-height: 40rpx;

        &.hui {
          background: #FFFFFF;
          border: 1px solid #C8C8C8;
          color: #C8C8C8;
        }
      }
      .progress_box{
        width: 158rpx;border-radius: 20rpx;
        // overflow: hidden;
        box-sizing: border-box;
        padding-right: 10rpx;
      }
      .val_num {
        font-size: 22rpx;
        color: #FF5429;
        margin-top: -2px;
        width: 86rpx;
      }
    }

    .right_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .btn {
        border-radius: 36rpx;
        font-size: 24rpx;
        color: #fff;
        font-weight: bold;
        margin-left: 10rpx;
        height: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;

        &.qd_btn {
          background: linear-gradient( 270deg, #FF8312 0%, #FF4E2C 100%);

          /* &:before {
            content: '';
            display: inline-block;
            width: 20rpx;
            height: 30rpx;
            background: url('https://lsz.lszbg.com/imgs/images/sd_icon.png') no-repeat center center / 100% 100%;
            margin-right: 5rpx;
          } */
        }

        &.opacity {
          opacity: .7;
          font-weight: normal;

          &:before {
            display: none;
          }
        }

        &.sq_btn {
          background: linear-gradient(to left, #BFBFBF, #C8C8C8);
        }
      }
    }
  }
  /* 虚线css */
  .activity_line{
    height: 30rpx;
    padding: 26rpx 14rpx 0;
    position: relative;
    .activity_line_left{
      width: 28rpx;
      height: 28rpx;
      background: #f4f4f4;
      border-radius: 50%;
      position: absolute;
      left: -14rpx;
      top: 20rpx;
    }
    .activity_line_right{
      width: 28rpx;
      height: 28rpx;
      background: #f4f4f4;
      border-radius: 50%;
      position: absolute;
      right: -14rpx;
      top: 20rpx;
    }
  }
  .active_con {
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx;
    align-items: center;
    background: url('https://lsz.lszbg.com/imgs/old/bg_order.png') no-repeat center center / 100% 100%;
    flex: 1;

    &.hui {
      background: url('https://lsz.lszbg.com/imgs/old/bg_order_hui.png') no-repeat center center / 100% 100%;

      .left_a {
        display: flex;
        align-items: center;

        .j_money {
          font-weight: bold;
          margin-right: 20rpx;

          .icon {
            font-size: 28rpx;
            color: #888;
          }

          .val {
            font-size: 48rpx;
            color: #888;
          }
        }

        .vip_no_yes {
          .yes_vip {
            font-size: 24rpx;
            color: #888;
            font-weight: bold;
          }

          .no_vip {
            font-size: 20rpx;
            color: #888;
            margin-top: 5rpx;
          }
        }
      }
    }

    &.opcity {
      opacity: .7;
    }

    .left_a {
      display: flex;
      align-items: center;

      .j_money {
        font-weight: bold;
        margin-right: 20rpx;

        .icon {
          font-size: 28rpx;
          color: #FE874B;
        }

        .val {
          font-size: 48rpx;
          color: #FE5414;
        }
      }

      .vip_no_yes {
        .yes_vip {
          font-size: 24rpx;
          color: #FE5414;
          font-weight: bold;
        }

        .no_vip {
          font-size: 20rpx;
          color: #FE5414;
          margin-top: 5rpx;
        }
      }
    }

    .right_a {
      width: 50%;
      position: relative;

      .r_con {
        position: relative;
        z-index: 111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        right: -36rpx;

        .lj_qd {
          font-size: 24rpx;
          color: #fff;
          margin-bottom: 10rpx;
        }

      }
    }
  }
}

/* 店铺列表css end */

/*
.active_box {
  border-radius: 10rpx;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 20rpx;
  align-items: center;
  justify-content: center;

  .a_title {
    font-size: 22rpx;
    color: #666;
    border-radius: 3px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    .activity_num {
      background: #F4F4F4;
      font-size: 24rpx;
      color: #3D3D3D;
      line-height: 30rpx;
      box-sizing: border-box;
      padding: 8rpx 16rpx;
      position: relative;
      z-index: 11;
      border-radius: 8rpx;
    }
    .pj_text {
      border: 1px solid #45E2BE;
      background: #EBFEF9;
      border-radius: 3px;
      color: #07AA83;
      box-sizing: border-box;
      padding: 0 10rpx;
      font-size: 24rpx;
      height: 40rpx;
      line-height: 40rpx;
      margin-left: 16rpx;

      &.hui {
        background: #EFEFEF;
        border: 1px solid #DEDEDE;
        color: #666;
      }
    }
    .money {
      background: #FFF7EF;
      border: 2rpx solid #FFBC7E;
      border-radius: 0 8rpx 8rpx 0;
      padding: 0 10rpx;
      font-size: 24rpx;
      color: #FF7900;
      height: 42rpx;
      line-height: 42rpx;

      &.hui {
        background: #FFFFFF;
        border: 1px solid #C8C8C8;
        color: #C8C8C8;
      }
    }
    .money_fan{
      background: #FFF7EF;
      border: 1px solid #FFBC7E;
      border-radius: 8rpx;
      padding: 0 10rpx;
      font-size: 24rpx;
      color: #FF7900;
      height: 42rpx;
      line-height: 42rpx;
    }
   .line {
      margin: auto;
      width: 100%;
      height: 2rpx;
      z-index: 1;
      background-color: #EEE;
     flex: 1;
    }
  }

  .active_btns {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    padding: 0 20rpx;
    .left_box {
      display: flex;
      align-items: center;
      .pj_text {
        border: 1px solid #45E2BE;
        background: #EBFEF9;
        border-radius: 3px;
        color: #07AA83;
        box-sizing: border-box;
        padding: 0 10rpx;
        font-size: 24rpx;
        height: 25px;
        line-height: 25px;
        margin-left: 10rpx;
        margin-left: 10rpx;

        &.hui {
          background: #EFEFEF;
          border: 1px solid #DEDEDE;
          color: #666;
        }
      }
      .progress_box{
        width: 100rpx;border-radius: 20rpx;
        // overflow: hidden;
        box-sizing: border-box;
        padding-right: 10rpx;
      }
      .val_num {
        font-size: 22rpx;
        color: #FF5429;
        margin-top: -2px;
        width: 86rpx;
      }
    }

    .right_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .btn {
        border-radius: 36rpx;
        font-size: 24rpx;
        color: #fff;
        font-weight: bold;
        margin-left: 10rpx;
        height: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;

        &.qd_btn {
          background: linear-gradient( 270deg, #FF8312 0%, #FF4E2C 100%);

          !* &:before {
            content: '';
            display: inline-block;
            width: 20rpx;
            height: 30rpx;
            background: url('https://lsz.lszbg.com/imgs/images/sd_icon.png') no-repeat center center / 100% 100%;
            margin-right: 5rpx;
          } *!
        }

        &.opacity {
          opacity: .7;
          font-weight: normal;

          &:before {
            display: none;
          }
        }

        &.sq_btn {
          background: linear-gradient(to left, #BFBFBF, #C8C8C8);
        }
      }
    }
  }

  .active_con {
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx;
    align-items: center;
    background: url('https://lsz.lszbg.com/imgs/old/bg_order.png') no-repeat center center / 100% 100%;
    flex: 1;

    &.hui {
      background: url('https://lsz.lszbg.com/imgs/old/bg_order_hui.png') no-repeat center center / 100% 100%;

      .left_a {
        display: flex;
        align-items: center;

        .j_money {
          font-weight: bold;
          margin-right: 20rpx;

          .icon {
            font-size: 28rpx;
            color: #888;
          }

          .val {
            font-size: 48rpx;
            color: #888;
          }
        }

        .vip_no_yes {
          .yes_vip {
            font-size: 24rpx;
            color: #888;
            font-weight: bold;
          }

          .no_vip {
            font-size: 20rpx;
            color: #888;
            margin-top: 5rpx;
          }
        }
      }
    }

    &.opcity {
      opacity: .7;
    }

    .left_a {
      display: flex;
      align-items: center;

      .j_money {
        font-weight: bold;
        margin-right: 20rpx;

        .icon {
          font-size: 28rpx;
          color: #FE874B;
        }

        .val {
          font-size: 48rpx;
          color: #FE5414;
        }
      }

      .vip_no_yes {
        .yes_vip {
          font-size: 24rpx;
          color: #FE5414;
          font-weight: bold;
        }

        .no_vip {
          font-size: 20rpx;
          color: #FE5414;
          margin-top: 5rpx;
        }
      }
    }

    .right_a {
      width: 50%;
      position: relative;

      .r_con {
        position: relative;
        z-index: 111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        right: -36rpx;

        .lj_qd {
          font-size: 24rpx;
          color: #fff;
          margin-bottom: 10rpx;
        }

      }
    }
  }
  !* 虚线css *!
  .activity_line{
    height: 30rpx;
    padding: 26rpx 14rpx 0;
    position: relative;
    .activity_line_left{
      width: 28rpx;
      height: 28rpx;
      background: #F4F4F4;
      border-radius: 50%;
      position: absolute;
      left: -14rpx;
      top: 20rpx;
    }
    .activity_line_right{
      width: 28rpx;
      height: 28rpx;
      background: #F4F4F4;
      border-radius: 50%;
      position: absolute;
      right: -14rpx;
      top: 20rpx;
    }
  }
}
*/

.bl_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4rpx;


  .time_text {
    color: #FC7532;
    font-size: 26rpx;
  }
}
</style>
